import React, { useState } from 'react'
import { useNavigate, useLocation } from 'umi'
import './index.scss'
import { Form, Input, Button, Toast } from 'antd-mobile'
import Icon from '@/components/Icon'
import { fetchLogin } from '@/api/home'
export default function index() {
  const navigator = useNavigate()
  const path = useLocation().state ? useLocation().state.path : '/home'
  const onFinish = (params: any) => {
    fetchLogin({
      pwd: params.pwd,
      username: params.username,
      deviceName: '黑河',
      deviceId: '白河'
    }).then(res => {
      console.log(res);
      if (res.data.code === 0) {
        localStorage.setItem('token', res.data.data.token)
        Toast.show({
          content: '登录成功',
          afterClose: () => {
            navigator(path)
          },
        })
      }

    })

  }
  // 判断眼睛的关开
  const [eyesOpen, setEyesOpen] = useState(false)
  return (
    <>
      <div className='loginDiv'>
        <div className='loginZZ'></div>
        <div className='loginForm'>
          <Form
            onFinish={onFinish}
            footer={
              <Button block type='submit' color='primary' size='large'>
                登录
              </Button>
            }>
            <Form.Item
              name='username'
              rules={[{ required: true, message: '用户名不能为空' }]}>
              <Input placeholder='用户名' />
            </Form.Item>
            <Form.Item
              name='pwd'
              rules={[{ required: true, message: '密码不能为空' }]}>
              <Input type={eyesOpen ? 'text' : 'password'} placeholder='密码' />
            </Form.Item>
          </Form>
          <div className='loginIcon' onClick={() => {
            setEyesOpen(!eyesOpen)
          }}>
            <Icon size={22} name={eyesOpen ? 'icon-browse' : 'icon-browse-off'} color='#fff' />
          </div>

          <div className='formBottom'>
            <span className='span1'>忘记密码</span>
            <span className='span2'></span>
            <span className='span3' onClick={() => {
              console.log(1);
              navigator('/reg', { replace: true })
              navigator(0)
            }}>免费注册</span>
          </div>
        </div>
      </div>
    </>
  )
}
